<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{'/webjars/layui/2.3.0/css/layui.css'}">
    <link rel="stylesheet" th:href="@{'/webjars/font-awesome/4.7.0/css/font-awesome.css'}">
    <link rel="shortcut icon" th:href="@{'/img/favicon.ico'}">
    <script language="JavaScript" th:src="@{'/webjars/jquery/3.3.1/dist/jquery.min.js'}"></script>
    <script language="JavaScript" th:src="@{'/js/dateformat.js'}" charset="utf-8"></script>
    <script language="JavaScript">
        $(function () {
            $("#reset").click(function () {
                $("#userId").text("");
                $("#password").text("");
            });
            layui.use(["laydate", "form", "layer"], function () {
                var $form = layui.form;
                $form.verify({
                    userId: function (value, item) {
                        if (value.trim() === "") {
                            return "学号/工号不能为空";
                        }
                        if (!new RegExp(/^[\d+]{6,12}$/).test(value)) {
                            return "学号/工号只能为数字且为 6 或 12 位";
                        }
                    },
                    password: function (value, item) {
                        if (value.trim() === "") {
                            return "密码不能为空";
                        }
                        if (!new RegExp(/^[A-Za-z0-9_-]{6,18}$/).test(value)) {
                            return "密码必须是 6-18 位，并且是大小写数字下划线等";
                        }
                    }
                });

                $form.on("submit(login)", function (data) {
                    $.ajax({
                        url: data.form.action,
                        type: data.form.method,
                        data: data.field,
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code === 400) {
                                /**
                                 * 如果 userId 有错误，显示错误信息。
                                 */
                                if (res.userId === "userId") {
                                    $("#userId").text(res.userIdField).css("color", "red");
                                } else {
                                    $("#userId").text("");
                                }
                                /**
                                 * 如果 username 有错误，显示错误信息。
                                 */
                                if (res.username === "username") {
                                    $("#username").text(res.usernameField).css("color", "red");
                                } else {
                                    $("#username").text("");
                                }

                                /**
                                 * 如果 password 有错误，显示错误信息。
                                 */
                                if (res.password === "password") {
                                    $("#password").text(res.passwordField).css("color", "red");
                                } else {
                                    $("#password").text("");
                                }

                                /**
                                 * 如果 msg 有错误，显示错误信息。
                                 */
                                if (res.msg === "msg") {
                                    // $("#msg").text(res.msgField).css("color", "red");
                                    layer.msg(res.msgField, {icon: 5});
                                } else {
                                    $("#msg").text("");
                                }
                            }
                            if (res.code === 200) {
                                $("#userId").text("");
                                $("#password").text("");
                                $("#msg").text("");
                                console.log("登录成功");
                                layer.msg("登录成功",
                                    {
                                        icon: 6,
                                        time: 5000,
                                    });
                                window.location.href = "/stu/student/to/stuInfo/get";
                            }
                        }
                    });
                    return false;
                });
            });
        });
    </script>

</head>
<body>
<ul th:insert="~{fragment/header :: top}"></ul>
<br><br><br><br>

<div class="layui-container layui-fluid layui-row">
    <form th:action="@{'/user/login'}" th:method="post" class="layui-form">
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label fa fa-qq" for="userId"> 学/工号</label>
            <div class="layui-input-block">
                <input type="text" name="userId" lay-verify="userId" placeholder="请输入学号/工号"
                       class="layui-input">
            </div>
            <span id="userId"></span>
            <span id="msg"></span>
        </div>

        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label layui-icon layui-icon-password"> 密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="password" placeholder="请输入密码" class="layui-input">
            </div>
            <span id="password"></span>
        </div>

        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-block">
                <input type="radio" name="userType" value="管理员" title="管理员" checked>
                <input type="radio" name="userType" value="教师" title="教师">
                <input type="radio" name="userType" value="学生" title="学生">
            </div>
        </div>
        <div class="layui-form-item layui-col-lg-offset3 layui-col-lg4">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="login">
                    <i class="fa fa-sign-in"></i> 登录</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">
                    重置</button>
            </div>
        </div>
    </form>
</div>
<br>
<div th:insert="~{fragment/header :: footer}"></div>
</body>
<script language="JavaScript" th:src="@{'/webjars/layui/2.3.0/layui.all.js'}" charset="utf-8"></script>
</html>